<div>
  <div class="searchItem">
    <label>内部标题：</label>
    <input nz-input placeholder="请输入内部标题" [(ngModel)]="query.title"/>
  </div>
  <div class="searchItem">
    <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
    <button nz-button nzType="default" (click)="resetCondition()">重置</button>
  </div>
  <div>
    <div class="searchItem">
      <button nz-button nzType="primary" (click)="addPageDecoration()">新建</button>
    </div>
  </div>
</div>
<!--表格-->
<nz-table
  #table
  nzSize="small"
  nzShowSizeChanger
  nzShowQuickJumper
  nzOuterBordered
  [nzData]="tableData.records"
  [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
  [nzTotal]="tableData.total"
  [(nzPageIndex)]="query.page"
  [(nzPageSize)]="query.pageSize"
  [nzFrontPagination]="false"
  [nzShowTotal]="totalTemplate"
  (nzPageIndexChange)="onPageIndexChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
>
  <thead>
  <tr>
    <th nzAlign="center">ID</th>
    <th nzAlign="center">外部标题</th>
    <th nzAlign="center">内部标题</th>
    <th nzAlign="center">适用用户</th>
    <th nzAlign="center">生效时间</th>
    <th nzAlign="center" nzWidth="200px">操作</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let data of table.data">
    <td nzAlign="center">{{ data['id'] }}</td>
    <td nzAlign="center">{{ data['title'] }}</td>
    <td nzAlign="center">{{ data['outsideTitle'] }}</td>
    <td nzAlign="center">{{ USERTYPE[data['userType']] }}</td>
    <td nzAlign="center">{{ data['takeEffectTime'] }}-{{ data['endTakeEffectTime'] }}</td>
    <td nzAlign="center">
      <!--      <a [href]="h5Url+'/#/hd/diy/'+data['id']" target="_blank">预览H5</a>-->
      <!--      <a [href]="pcUrl+'/#/hd/diy/'+data['id']" target="_blank">预览PC</a>-->
      <a (click)="showPreview(h5Url+'/#/hd/diy/'+data['id'],'h5')" target="_blank">预览H5</a>
      <a (click)="showPreview(pcUrl+'/#/hd/diy/'+data['id'],'pc')" target="_blank">预览PC</a>
      <a (click)="showEditModal(data, 'copy')">复制</a>
      <a (click)="showEditModal(data, 'edit')">编辑</a>
      <a (click)="toDecoration(data)">装修</a>
    </td>
  </tr>
  </tbody>
</nz-table>

<!-- 分页template -->
<ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>

<!--页面装修编辑-->
<nz-modal
  [(nzVisible)]="modal.visible"
  nzTitle="页面装修"
  (nzOnOk)="saveDecoration()"
  (nzOnCancel)="hideModal()">
  <div *nzModalContent>
    <h1 style="margin-bottom: 12px">基本信息</h1>
    <div class="row">
      <span class="label required">外部标题</span>
      <input nz-input placeholder="请输入内部标题" maxlength="50" [(ngModel)]="modal.data.title"/>
    </div>
    <div class="row">
      <span class="label required">内部标题</span>
      <input nz-input placeholder="请输入外部标题" maxlength="50" [(ngModel)]="modal.data.outsideTitle"/>
    </div>
    <div class="row">
      <span class="label selfTop">备注</span>
      <nz-textarea-count style="width: 280px" [nzMaxCharacterCount]="100">
        <textarea rows="4" maxlength="100" nz-input [(ngModel)]="modal.data.note"></textarea>
      </nz-textarea-count>
    </div>

    <h1 style="margin-bottom: 12px">全局样式</h1>
    <div class="row">
      <span class="label required">背景色</span>
      <input nz-input placeholder="请输入背景色" [(ngModel)]="modal.data.backColor"/>
    </div>
    <div class="row">
      <span class="label required">通顶模式</span>
      <nz-radio-group [(ngModel)]="modal.data.topMode">
        <label nz-radio [nzValue]="0">启用</label>
        <label nz-radio [nzValue]="1">禁用</label>
      </nz-radio-group>
    </div>

    <h1 style="margin-bottom: 12px">适用范围</h1>
    <div class="row">
      <span class="label required">适用用户</span>
      <nz-radio-group [(ngModel)]="modal.data.userType">
        <label nz-radio [nzValue]="0">不限制</label>
        <label nz-radio [nzValue]="1">C端用户</label>
        <label nz-radio [nzValue]="2">B端用户</label>
      </nz-radio-group>
    </div>
    <div class="row">
      <span class="label required">生效时间</span>
      <nz-range-picker style="width: 330px"
                       nzShowTime
                       nzFormat="yyyy-MM-dd HH:mm:ss"
                       [(ngModel)]="modal.data.time"
      ></nz-range-picker>
    </div>
  </div>
</nz-modal>

<!--页面装修预览-->
<nz-modal
  [(nzVisible)]="previewModal.visible"
  [nzTitle]="previewModal.type==='h5'?'预览H5':'预览PC'"
  [nzWidth]="previewModal.type==='h5'?'423px':'1048px'"
  [nzFooter]="null"
  (nzOnCancel)="previewModal.visible = false">
  <div style="padding: 0;position: relative" *nzModalContent>
    <iframe [src]="previewModal.url" [style]="{width: previewModal.type==='h5'?'375px':'1000px',height: previewModal.type==='h5'?'750px':'600px' }"></iframe>
  </div>
</nz-modal>
